<!DOCTYPE html>
<html lang="ch-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- <script>
        function toYellow() {
            let yellow = document.getElementById("yellow");
            yellow.style.color = "yellow";
        }
    </script> -->
    <script src="./js/index.js" async></script>
</head>

<body>
    <input type="button" value="变黄" id="yellow" onclick="toYellow()">
    <!-- <iframe src="//player.bilibili.com/player.html?aid=591467021&bvid=BV1rq4y1r7N9&cid=436716667&page=1" scrolling="no"  frameborder="no" framespacing="0" allowfullscreen="true" width="800px" height="450px"> </iframe> -->
    .c-button {
 color: #000;
 font-weight: 700;
 font-size: 16px;
 text-decoration: none;
 padding: 0.9em 1.6em;
 cursor: pointer;
 display: inline-block;
 vertical-align: middle;
 position: relative;
 z-index: 1;
}

.c-button--gooey {
 color: #06c8d9;
 text-transform: uppercase;
 letter-spacing: 2px;
 border: 4px solid #06c8d9;
 border-radius: 0;
 position: relative;
 transition: all 700ms ease;
}

.c-button--gooey .c-button__blobs {
 height: 100%;
 filter: url(#goo);
 overflow: hidden;
 position: absolute;
 top: 0;
 left: 0;
 bottom: -3px;
 right: -1px;
 z-index: -1;
}

.c-button--gooey .c-button__blobs div {
 background-color: #06c8d9;
 width: 34%;
 height: 100%;
 border-radius: 100%;
 position: absolute;
 transform: scale(1.4) translateY(125%) translateZ(0);
 transition: all 700ms ease;
}

.c-button--gooey .c-button__blobs div:nth-child(1) {
 left: -5%;
}

.c-button--gooey .c-button__blobs div:nth-child(2) {
 left: 30%;
 transition-delay: 60ms;
}

.c-button--gooey .c-button__blobs div:nth-child(3) {
 left: 66%;
 transition-delay: 25ms;
}

.c-button--gooey:hover {
 color: #fff;
}

.c-button--gooey:hover .c-button__blobs div {
 transform: scale(1.4) translateY(0) translateZ(0);
}
</body>

</html>